<!DOCTYPE html>
<html>
<head>

        <meta charset="utf-8" />

        <title>Demo Chat</title>

        <link href="bootstrap.css" rel="stylesheet">

	<style>
		body {
			padding:20px;
		}
		#console {
			height: 400px;
			overflow: auto;
		}
		.username-msg {color:orange;}
		.connect-msg {color:green;}
		.disconnect-msg {color:red;}
		.send-msg {color:#888}
	</style>


	<script src="/lib/socket.io.js"></script>
    <script src="/lib/moment.min.js"></script>
    <script src="/lib/jquery-2.1.4.min.js"></script>
    <script src="/js/app.js"></script>

	<script>

		var socket =  io.connect(ServerUrl);

		socket.on('connect', function() {
			console.log("Client has connected to the server!");
		});

		socket.on('mosaic-template', function(data) {
            alert("mosaic template set successfully!")
		});

		socket.on('disconnect', function() {
            console.log("The client has disconnected!");
		});

        function sendDisconnect() {
                socket.disconnect();
        }

//		function sendMessage() {


            var jsonObject = {};
            socket.emit('mosaic-template', jsonObject);
//		}



	</script>
</head>

<body>

    <img id="img_mosaic">

</body>

</html>
